<template>
<div class="small-4 medium-6 cell">
  <ul :id="id" class="dropdown menu">

    <switch-lang :i18n-icon="lang.i18nIcon"
                 :cn-icon="lang.cnIcon"
                 :en-icon="lang.enIcon" />

    <noti-msg v-if="noti" :icon="noti.icon" :items="noti.items" />

    <current-user :user-icon="currentUser.userIcon"
                  :pwd-icon="currentUser.pwdIcon"
                  :sign-out-icon="currentUser.signOutIcon"
                  :display-name="displayName"
                  :change-pwd-handler="currentUser.changePwdHandler"
                  :sign-out-handler="currentUser.signOutHandler" />

  </ul>
</div>
</template>

<script>
import SwitchLang from './SwitchLang';
import NotiMsg from './NotiMsg';
import CurrentUser from './CurrentUser';

export default {

  components: {
    SwitchLang,
    NotiMsg,
    CurrentUser
  },

  props: {
    id: {
      type: String,
      required: true
    },
    lang: {
      type: Object,
      default() { return {}; }
    },
    noti: {
      type: Object
    },
    currentUser: {
      type: Object
    },
    displayName: {
      type: String
    }
  },

  mounted() {
    new Foundation.DropdownMenu($(`#${this.id}`), {});
  }

};
</script>
